import React, { Suspense } from 'react';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 Loading...

בדוגמה זו:

• נעשה שימוש ב-React.lazy כדי לטעון בעצלות את MyComponent.
• Suspense עוטף את LazyComponent.
• ה-prop fallback מספק ממשק משתמש חלופי (מחוון טעינה) המוצג בזמן ש-MyComponent נטען.

יישום Error Boundaries

בעוד ש-Suspense מטפל במצבי טעינה, Error Boundaries הם קומפוננטות ריאקט שתופסות שגיאות JavaScript בכל מקום בעץ הקומפוננטות שמתחתיהן, רושמות את השגיאות הללו, ומציגות ממשק משתמש חלופי במקום לקרוס את כל עץ הקומפוננטות.

כיצד Error Boundaries עובדים

Error Boundaries הם קומפוננטות מחלקה (class components) המגדירות את מתודות מחזור החיים הבאות:

• static getDerivedStateFromError(error): מתודה זו מופעלת לאחר ששגיאה נזרקה על ידי קומפוננטה צאצאית. היא מקבלת את השגיאה שנזרקה כארגומנט וצריכה להחזיר ערך לעדכון המצב (state).
• componentDidCatch(error, info): מתודה זו מופעלת לאחר ששגיאה נזרקה על ידי קומפוננטה צאצאית. היא מקבלת את השגיאה ואובייקט מידע המכיל פרטים על איזו קומפוננטה זרקה את השגיאה. זהו המקום האידיאלי לרשום את השגיאה לשירות כמו Sentry או Bugsnag.

חשוב: Error Boundaries תופסים שגיאות רק בקומפוננטות שמתחתיהם בעץ. Error Boundary אינו יכול לתפוס שגיאה בתוך עצמו.

דוגמה: יישום בסיסי של Error Boundary

            
import React, { Component } from 'react';

class ErrorBoundary extends Component {
 constructor(props) {
 super(props);
 this.state = { hasError: false };
 }

 static getDerivedStateFromError(error) {
 // Update state so the next render will show the fallback UI.
 return { hasError: true };
 }

 componentDidCatch(error, info) {
 // You can also log the error to an error reporting service
 console.error('Caught error: ', error, info);
 }

 render() {
 if (this.state.hasError) {
 // You can render any custom fallback UI
 return 
Something went wrong.
;
 }

 return this.props.children; 
 }
}

export default ErrorBoundary;

            

              
                Copy
              
            
          

כדי להשתמש ב-Error Boundary, עטפו כל קומפוננטה שעלולה לזרוק שגיאה:

            
import React from 'react';
import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
 return (
 
 
 
 );
}

export default App;

            

              
                Copy
              
            
          

שילוב Suspense ו-Error Boundaries

הכוח האמיתי מגיע משילוב של Suspense ו-Error Boundaries. זה מאפשר לכם לטפל גם במצבי טעינה וגם בשגיאות בחן בתוך האפליקציה שלכם. הנוהג המומלץ הוא לעטוף את Suspense ב-Error Boundary. בדרך זו, אם הקומפוננטה הנטענת בעצלות נכשלת בטעינה (למשל, שגיאת רשת), ה-Error Boundary יכול לתפוס את השגיאה ולהציג הודעה מועילה למשתמש.

דוגמה: שילוב Suspense ו-Error Boundaries

            
import React, { Suspense } from 'react';
import ErrorBoundary from './ErrorBoundary';

const LazyComponent = React.lazy(() => import('./MyComponent'));

function App() {
 return (
 
 Loading...